<page-grid>
  <nz-card [nzBordered]="false" class>
    <form nz-form se-container="1" size="compact" [gutter]="32" [labelWidth]="null">
      <se label="所属类目" line>
        <tag-select>
          <nz-tag
            *ngFor="let i of categories; let idx = index"
            nzMode="checkable"
            [nzChecked]="i.value"
            (nzCheckedChange)="changeCategory($event, idx)"
            >{{ i.text }}</nz-tag
          >
        </tag-select>
      </se>
      <se label="其它选项">
        <div class="ant-form ant-form-inline">
          <nz-form-item>
            <nz-form-label nzFor="rate">作者</nz-form-label>
            <nz-form-control>
              <nz-select [(ngModel)]="q.user" name="user" [nzPlaceHolder]="'不限'" [nzShowSearch]="true" style="width: 100px">
                <nz-option [nzLabel]="'李三'" [nzValue]="'lisa'"></nz-option>
              </nz-select>
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label nzFor="rate">好评度</nz-form-label>
            <nz-form-control>
              <nz-select [(ngModel)]="q.rate" name="rate" [nzPlaceHolder]="'不限'" [nzShowSearch]="true" style="width: 100px">
                <nz-option [nzLabel]="'优秀'" [nzValue]="'good'"></nz-option>
              </nz-select>
            </nz-form-control>
          </nz-form-item>
        </div>
      </se>
    </form>
  </nz-card>
  <nz-list [nzLoading]="loading" [nzDataSource]="list" [nzRenderItem]="item" [nzGrid]="{ gutter: 24, xl: 6, lg: 8, md: 8, sm: 12, xs: 24 }">
    <ng-template #item let-item>
      <nz-list-item>
        <nz-card nzHoverable [nzActions]="[op1, op2, op3, op4]">
          <ng-template #op1>
            <i nz-tooltip nzTooltipTitle="下载" nz-icon nzType="download"></i>
          </ng-template>
          <ng-template #op2>
            <i nz-tooltip nzTooltipTitle="编辑" nz-icon nzType="edit"></i>
          </ng-template>
          <ng-template #op3>
            <i nz-tooltip nzTooltipTitle="分享" nz-icon nzType="share-alt"></i>
          </ng-template>
          <ng-template #op4>
            <i nz-dropdown [nzDropdownMenu]="op4Menu" nzPlacement="bottomLeft" nz-icon nzType="ellipsis"></i>
            <nz-dropdown-menu #op4Menu="nzDropdownMenu">
              <i nz-dropdown nz-icon nzType="ellipsis"></i>
              <ul nz-menu>
                <li nz-menu-item>1st menu item</li>
                <li nz-menu-item>2st menu item</li>
                <li nz-menu-item>3st menu item</li>
              </ul>
            </nz-dropdown-menu>
          </ng-template>
          <nz-card-meta [nzTitle]="item.title" [nzAvatar]="nzAvatar">
            <ng-template #nzAvatar>
              <nz-avatar nzSize="small" [nzSrc]="item.avatar"></nz-avatar>
            </ng-template>
          </nz-card-meta>
          <div class="card-info d-flex">
            <div>
              <p>活跃用户</p>
              <p>
                {{ item.activeUser }}
                <em class="wan">万</em>
              </p>
            </div>
            <div>
              <p>新增用户</p>
              <p>{{ item.newUser | number: '3.' }}</p>
            </div>
          </div>
        </nz-card>
      </nz-list-item>
    </ng-template>
  </nz-list>
</page-grid>
